<template>
  <div id="Map">
      
        <div id="allmap" class="allmap" ref="myMap"></div>
        
  </div>
</template>

<script>
export default {
  name: 'Map',
  components:{
  },
  data () {
    return {
      type: 'tab',
      center: {lng: 112.311565, lat:39.872426},
    }
  },
mounted(){
       this.initMap()
   },
methods:{
     initMap () {
       this.createMap() ; //创建地图
       this.setMapEvent();//设置地图事件
       this.addMapControl();//向地图添加控件
       this.addMarker();//向地图中添加marker
     },
     createMap(){
       var map = new BMap.Map(this.$refs.myMap);//在百度地图容器中创建一个地图
      //  var point = new BMap.Point(116.405813,39.914059);//定义一个中心点坐标
      var point = new BMap.Point(this.center.lng,this.center.lat);//定义一个中心点坐标
       map.centerAndZoom(point,12);//设定地图的中心点和坐标并将地图显示在地图容器中
       window.map = map;//将map变量存储在全局
     },
     setMapEvent(){
       map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
       map.enableScrollWheelZoom();//启用地图滚轮放大缩小
       map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
       map.enableKeyboard();//启用键盘上下左右键移动地图
     },
     addMapControl(){
       //向地图中添加缩放控件
       var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
       map.addControl(ctrl_nav);
       //向地图中添加缩略图控件
       var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1});
       map.addControl(ctrl_ove);
       //向地图中添加比例尺控件
       var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
       map.addControl(ctrl_sca);
     },
     addMarker(){
       var markerArr = [//地址数据
         { title: "甜品店1号",point: "112.311565|39.872426",address: "北京市 ",contact: "1"},
         { title: "sweet2",point: "112.404782|39.867238",address: "北京市百",contact: "2"},
         { title: "sweet3",point: "112.362076|39.866107",address: "北京市",contact: "3"},
         { title: "sweet4",point: "113.607422|39.930874",address: "北京市",contact: "4"},
         { title: "sweet5",point: "115.539295|39.807957",address: "北京市",contact: "5"},
         { title: "sweet6",point: "112.246079|40.217775",address: "北京市昌广场F4",contact: "6"},
         { title: "sweet7",point: "116.706746|39.924416",address: "北京市通州区",contact: "7"},
       ]
       var point = new Array();//定义数组标注经纬信息

       var marker = new Array();//定义数组点对象信息

       var info = new Array();//定义悬浮提示信息
        //设置icon信息
        var width = 20;
        var height = 45;
        var imgSrc = "http://api.map.baidu.com/lbsapi/creatmap/images/us_mk_icon.png"; //引入icon图片
        var myIcon_vd1 = new BMap.Icon(imgSrc, new BMap.Size(width,height));//配置icon
        for(var i = 0; i < markerArr.length; i++){//遍历
         var infoA = markerArr[i].point.split("|")[0];//分割|
         var infoB = markerArr[i].point.split("|")[1];

         point[i] = new window.BMap.Point(infoA,infoB);

         marker[i] = new window.BMap.Marker(point[i],{icon:myIcon_vd1});//把icon和坐标添加到Marker中

         map.addOverlay(marker[i]);
         marker[i].setAnimation(BMAP_ANIMATION_BOUNCE);

         var label = new window.BMap.Label(markerArr[i].title,{offset: new window.BMap.Size(20,-10)});
         label.setStyle({  //设置提示框的样式
            color : "#000", 
            fontSize : "14px", 
            backgroundColor :"#fff",
            border :"1px solid red", 
            fontWeight :"bold" ,
            padding :"2px 6px"
        });
         marker[i].setLabel(label);

         info[i] = new window.BMap.InfoWindow("<p style='font-size:12px;line-height:1.8em;'" + 
         markerArr[i].title + "</br>地址：" + markerArr[i].address + "</br> 店铺：" + 
         markerArr[i].contact+"</p>");//悬浮提示信息
       }
       marker[0].addEventListener("mouseover",function(){
         this.openInfoWindow(info[0]);//悬浮监听提示方法
       });
       marker[1].addEventListener("mouseover",function(){
         this.openInfoWindow(info[1]);//悬浮监听提示方法
       });
       marker[2].addEventListener("mouseover",function(){
         this.openInfoWindow(info[2]);//悬浮监听提示方法
       });
       marker[3].addEventListener("mouseover",function(){
         this.openInfoWindow(info[3]);//悬浮监听提示方法
       });
       marker[4].addEventListener("mouseover",function(){
         this.openInfoWindow(info[4]);//悬浮监听提示方法
       });
       marker[5].addEventListener("mouseover",function(){
         this.openInfoWindow(info[5]);//悬浮监听提示方法
       });
       marker[6].addEventListener("mouseover",function(){
         this.openInfoWindow(info[6]);//悬浮监听提示方法
       });
     },
}
}
</script>

<style scoped>
 #allmap{
    width: 80%;
    height: 500px;
    font-size: 18px;
    line-height: 36px;
    margin: 20px auto;
  }
</style>